<div class="page-wrapper">
  <!-- Page header -->
  <div class="page-header d-print-none">
    <div class="container-xl">
      <div class="row g-2 align-items-center">
        <div class="col">
          <h2 class="page-title">Tools</h2>
        </div>
      </div>
    </div>
  </div>
  <!-- Page body -->
  <div class="page-body">
    <div class="container-xl">
      <div class="card">
        <div class="row g-0">
          <div class="col-12 col-md-3 border-end">
            <div class="card-body">
              <div ng-repeat="menu in menuTools | filter : {status : '1'}">
                <h4 class="subheader">{{ menu.name }}</h4>
                <div class="list-group list-group-transparent"
                  ng-repeat="tool in menu.children | filter : {status : '1'}">
                  <a ui-sref="{{ tool.stateName }}"
                    class="list-group-item list-group-item-action d-flex align-items-center active"
                    ng-class="{'active':body.$state.current.name.startsWith(tool.stateName)}">{{ tool.name }}</a>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-9 d-flex flex-column">
            <div ui-view></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>